<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    // 组件被成为状态机，通过更新组件的state 来更新对应的页面显示（重新渲染组件）

    // 有state 就是复杂组件， 没有就不是

    class ZuJian extends React.Component {

        // 会渲染1+n次，  第一次启动会渲染， 以后只要更新状态都会 更新几次渲染几次
        render() { // 原型对象上，供实例使用
            console.log(this) // this这个组件实例对象
            return (
                    <h2>我是组件</h2>
            )
        }
    }

    console.log(ZuJian.prototype)
    // 渲染组件页面
    ReactDOM.render(<ZuJian/>, document.getElementById("test"))

    // ReactDOM.render执行之后两件事情：
    // 1、React解析组件标签，找到了ZuJian组件
    // 2、发现组件是类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
    // 3、将render返回的虚拟dom转为真实dom，随后呈现在页面中
</script>
</body>
</html>